<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/detail.css">
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/mui/js/mui.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back(-1)"></a>
        <h1 class="mui-title">商品详情</h1>

    </header>
    <nav class="mui-bar mui-bar-tab footer">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon fa fa-shopping-cart"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="user.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">会员中心</span>
        </a>
    </nav>
    <div class="mui-content">
        <!-- 轮播图部分 -->
        <div class="mui-slider">
            <div class="mui-slider-group">
                <div class="mui-slider-item"><a href="#"><img src="./images/banner1.png" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="./images/banner2.png" /></a></div>
            </div>
        </div>
        <!-- 商品标题部分 -->
        <div class="pro-name">
            【莹恋】MIZUNO美津浓V1GA159002乒乓球鞋男鞋女鞋室内综合训练鞋
        </div>
        <!-- 商品价格部分 -->
        <div class="pro-price">
            价格：<span>&yen;499.1</span><span>&yen;998.00</span>
        </div>

        <!-- 商品尺码部分 -->
        <div class="pro-size">
            尺码：
            <!-- span*21{$@40} -->
            <span class="active">40</span>
            <span>41</span>
            <span>42</span>
            <span>43</span>
            <span>44</span>
            <span>45</span>
            <span>46</span>
            <span>47</span>
            <span>48</span>
            <span>49</span>
            <span>50</span>
            <span>51</span>
            <span>52</span>
            <span>53</span>
            <span>54</span>
            <span>55</span>
            <span>56</span>
            <span>57</span>
            <span>58</span>
            <span>59</span>
            <span>60</span>
        </div>
        <!-- 商品数量部分 -->
        <div class="pro-num">
            数量：<span class="reduce">-</span><input type="text" value="1"><span class="add">+</span>
            剩余：20件
        </div>
        <!-- 按钮组 -->
        <div class="pro-cart">
            <button>查看购物车</button>
            <button>加入购物车</button>
        </div>
    </div>
</body>

</html>
